<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script setup="props" lang="ts">
import { computed, ref, watchEffect } from "vue";
import { useStore } from "@/store-reactive";
declare const props: {
  msg: string;
};
export const count = ref(0);
export const computedMsg = computed(() => props.msg + "!!!!");
const store = useStore();
watchEffect(() => {
  console.log("watchEffect -> computedMsg: ", computedMsg.value);
  console.log("watchEffect -> store: ", store.state.counter);
});

export default {};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
